import React, { Component } from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { UdPage, UdPageHeader, udConfigProvider, http } from '@/lib'
import { BackTop, Tabs } from 'antd'
import comApis from '@/apis'
import InventoryTimeControl from './component/InventoryTimeControl'
import QuotaLimitControl from './component/QuotaLimitControl'
import './style.scss'
import QuotaValidityPeriod from './component/QuotaValidityPeriodControl'
import InventoryMultipleSetting from './component/InventoryMultipleSetting'
import AogtimesConfigSetting from './component/AogtimesConfigSetting'
import udMainStore from '@/store/UdMain'

const { TabPane } = Tabs

enum ETypeTabs {
  // 手工盘点控制
  INVENTORY_TIME = '1',
  // 配额上限控制
  QUOTA_LIMIT = '2',
  // 配额有效周期
  QUOTA_VALIDITY_PERIOD = '3',
  //安全库存倍数配置
  INVENTORY_MULTIPLE_SETTING = '4',
  //
  AOGTIMES_SETTING = '5',
}

export default class GeneralConfigPage extends Component<GeneralConfigPageProps, GeneralConfigPageState> {
  private brandList = udMainStore.brandList
  private pageContainer = udConfigProvider.ui.getPageContainer()
  public typeTabs = [
    {
      value: ETypeTabs.INVENTORY_TIME,
      title: '手工盘点控制',
    },
    {
      value: ETypeTabs.QUOTA_LIMIT,
      title: '计算配额公式配置',
    },
    {
      value: ETypeTabs.QUOTA_VALIDITY_PERIOD,
      title: '配额有效期周期配置',
    },
    {
      value: ETypeTabs.INVENTORY_MULTIPLE_SETTING,
      title: '安全库存倍数配置',
    },
    {
      value: ETypeTabs.AOGTIMES_SETTING,
      title: '期间开单周期配置',
    },
    
  ]
  constructor(props) {
    super(props)
    this.state = {
      title: '通用配置',
      brandCompanies: [],
      controlType: ETypeTabs.INVENTORY_TIME,
    }
  }

  componentDidMount() {
    this.getBrandCompanyList()
  }

  render() {
    return (
      <UdPage className="detail-page general-config-page">
        <UdPageHeader title={this.state.title} affixProps={{ target: () => this.pageContainer }} />
        <Tabs defaultActiveKey={ETypeTabs.INVENTORY_TIME} onChange={this.tabsChange}>
          {this.typeTabs.map(({ title, value }) => (
            <TabPane tab={title} key={value}>
              {this.state.controlType == value && this.getRenderTabCon()}
            </TabPane>
          ))}
        </Tabs>
        {this.pageContainer && <BackTop target={() => this.pageContainer} visibilityHeight={100} />}
      </UdPage>
    )
  }

  public query = () => {}

  public tabsChange = key => {
    const controlType = key
    this.setState({
      controlType,
    })
  }

  public getRenderTabCon = () => {
    const { controlType, brandCompanies } = this.state
    if (controlType == ETypeTabs.INVENTORY_TIME) {
      return <InventoryTimeControl tabs={brandCompanies} />
    } else if (controlType == ETypeTabs.QUOTA_LIMIT) {
      return <QuotaLimitControl tabs={brandCompanies} />
    } else if (controlType == ETypeTabs.QUOTA_VALIDITY_PERIOD) {
      return brandCompanies && brandCompanies.length > 0 && <QuotaValidityPeriod tabs={brandCompanies} />
    }else if (controlType == ETypeTabs.INVENTORY_MULTIPLE_SETTING) {
      return <InventoryMultipleSetting/>
    }else if (controlType == ETypeTabs.AOGTIMES_SETTING) {
      return <AogtimesConfigSetting brandList={this.brandList}/>
    }
  }

  public getBrandCompanyList = () => {
    http.get(comApis.BrandCompanySelectAbbreviation).then(res => {
      const brandCompanies = res.data.map(({ brandCode: value, brandNameShort: title }) => ({ value, title }))
      this.setState({
        brandCompanies,
      })
    })
  }
}

interface GeneralConfigPageProps extends RouteComponentProps {

}

interface GeneralConfigPageState {
  title: string
  brandCompanies: { value: string, title: string }[]
  controlType?: string
}
